<script>
export default {
    data() {
        return {
            dialogVisible: false,
            distForm: {},
            addStation: true,
            active:'add',
        }
    },
    props: {
        tableColumns: Array,
        tableConfig: Object
    },
    mounted() {
        this.clearForm();
    },
    methods: {
        openDia(sendMsg, active) {
            this.dialogVisible = true;
            this.active = active;
            if (active === 'add') this.clearForm()
            else this.setBackData(sendMsg);
        },
        clearForm() {
            this.tableColumns.forEach(x => {
                this.$set(this.distForm, x.id, '')
                if (x.id === 'state') this.$set(this.distForm, x.id, '01')
                if (x.id === 'districtCode') {
                    this.$set(this.distForm, x.id, '510525' + String(new Date().getTime()).slice(-6))
                }
                if (x.required) {
                    this.$HttpService.get(x.required).then(res => {
                        x['requiredData'] = res;
                    })
                }
            })
        },
        setBackData(sendMsg) {
            this.distForm = {...sendMsg}
        },
        handleClose() {
            this.dialogVisible = false;
            this.$refs['form'].resetFields();
        },
        pullData() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    delete this.distForm.createDate;
                    this.distForm.parentDistrictCode = this.distForm.parentDistrictCode?this.distForm.parentDistrictCode[0]:'0'
                    if (this.active === 'add') this.$HttpService.post('/t-district/add', {
                        ...this.distForm
                    }).then(() => {
                        this.$message.success('添加成功！')
                        this.dialogVisible = false;
                        this.$emit('onSuccess');
                    })
                    else this.$HttpService.put('/t-district/update', {
                        ...this.distForm
                    }).then(() => {
                        this.$message.success('修改成功！')
                        this.dialogVisible = false;
                        this.$emit('onSuccess');
                    })
                } else {
                    console.log('校验未通过');
                    return false;
                }
            });
        },

    }
}
</script>

<template>
    <el-dialog
        title="新增或管理区划"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div class="center">
            <div class="row">
                <el-form ref="form" label-width="130px" :model="distForm">
                    <el-form-item :rules="!x.notMust?{required:true,message:`请录入${x.label}信息`,targger:['blur','change']}:{}" :label="x.label" v-for="x in tableColumns" :prop="x.id" v-if="!x.addHide">
                        <el-input :disabled="active==='update' && x.id === 'districtCode'" v-if="x.searchType === 'input'" :placeholder="`请输入${x.label}`"
                                  v-model="distForm[x.id]"></el-input>
                        <el-switch v-if="x.searchType === 'state'" v-model="distForm[x.id]"
                                   active-color="#13ce66" inactive-color="#ff4949" active-value="01"
                                   inactive-value="02"></el-switch>
                        <el-cascader v-if="x.searchType === 'tree'" :options="x.requiredData" v-model="distForm[x.id]"
                                     :props="{
							label:x.requiredProp.label,
							value:x.requiredProp.value,
							checkStrictly: true
						}" clearable></el-cascader>
                    </el-form-item>
                    <el-form-item v-if="active === 'update' && distForm['stationName']" label="默认创建站点">
                       <span>{{distForm['stationName']}}</span>
                    </el-form-item>
                    <el-form-item v-if="active === 'add'" label="创建默认站点">
                        <el-switch
                            v-model="addStation"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                </el-form>
            </div>
            <div class="opa">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="pullData">确 定</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<style scoped>
.center {
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 15%;
    min-height: 200px;

    .row {
        padding-left: 30px;
        width: 80%;
    }

    .opa {
        padding-left: 130px;
        text-align: right;
    }
}
</style>
